<template>
  <div :class="['search-bar', theme]">
    <div class="input-box">
      <!-- <van-icon name="search" size="20" color="#9A9A9A" /> -->
	  <image src="https://www.peikangbao.cn/attachment/image/666/25/10/495ba5b0289f4df3938c48d4516ff3e8.png" mode="" class="search-img"></image>
      <input
        type="text"
        v-model="iKeyword"
        :disabled="disabled"
        :placeholder="placeholder"
        placeholder-style="font-size: 24rpx;color:#ffffff"
        confirm-type="search"
        @confirm="searchFun"
      />
      <div v-if="disabled" class="mask-disable" />
      <div v-if="btnPlace === 'inner'" class="search-btn inner">
        <!-- <van-button @click="searchFun" round :custom-class="['btn', btnClass]">
          搜索
        </van-button> -->
		<view class="btn" @click="searchFun">
			搜索工作者
		</view>
      </div>
    </div>
    <div v-if="btnPlace === 'right'" class="search-btn">
      <!-- <van-button @click="searchFun" round :custom-class="['btn', btnClass]">
        搜索
      </van-button> -->
	  <view class="btn" @click="searchFun">
	  	搜索工作者
	  </view>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    // 主题：bright=白色，dark=灰色
    theme: {
      type: String,
      default: 'bright'
    },
    // placeholder
    placeholder: {
      type: String,
      default: '请输入内容进行搜索'
    },
    // 搜索按钮位置，right=右边，inner=里面
    btnPlace: {
      type: String,
      default: 'right'
    },
    // 搜索按钮样式
    btnClass: {
      type: String,
      default: 'primary'
    },
    // 点击搜索
    click: {
      type: Function,
      default: () => {}
    },
    // 是否禁用
    disabled: {
      type: Boolean,
      default: false
    },
    // 父组件传过来的值
    keyword: {
      type: String,
      default: ''
    }
  },
  computed: {
    // iKeyword: {
    //   get() {
    //     return this.keyword
    //   },
    //   set(val) {
    //     this.$emit('update:keyword', val)
    //   }
    // }
  },
  data() {
  	return {
  		iKeyword: '',
  	}
  },
  methods: {
    searchFun() {
		console.log(this.iKeyword, 'this.iKeyword')
      this.$emit('click', this.iKeyword)
    }
  }
}
</script>

<style lang="scss" scoped>
.search-bar {
  display: flex;
  align-items: center;
  padding: 20rpx 25rpx;
  width: 100%;
  font-size: 24rpx;
  .input-box {
    position: relative;
    flex: auto;
    display: flex;
    align-items: center;
    padding: 0 20rpx;
    height: 70rpx;
    // background: #fff;
    // background: #ff0000;
    border-radius: 36rpx;
	background: url('https://www.peikangbao.cn/attachment/image/666/25/10/6e339b79fcde4a5bbb96446b0c3060b1.png') no-repeat;
	background-size: 100% 100%;
	.search-img {
		width: 37rpx;
		height: 37rpx;
	}
    input {
      position: relative;
      z-index: 1;
      padding-left: 10rpx;
      // width: 100%;
	  flex: 1;
      color: #ffffff;
    }
    .mask-disable {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 2;
    }
  }
  .search-btn {
    flex: none;
    // margin-left: 20rpx;
    ::v-deep  .btn {
      // padding: 0 20rpx;
      width: 150rpx;
      height: 50rpx;
	  // background: url(../../static/img/newVersion/btn-icon.png) no-repeat;
	  background: #ff9966;
	  color: #ffffff;
	  text-align: center;
	  line-height: 50rpx;
	  font-family: Source Han Sans, Source Han Sans;
	  font-weight: 400;
	  font-size: 22rpx;
	  color: #FFFFFF;
	  background-size: 100% 100%;
	  border-radius: 100rpx;
      &.primary {
        color: #fff;
        background-color: #ff8c20;
        border: 1rpx solid #ff8c20;
      }
      &.danger {
        color: #fff;
        background-color: #DD2822;
        border: 1rpx solid #DD2822;
      }
      &.info {
        color: #fff;
        background-color: #22b8c8;
        border: 1rpx solid #22b8c8;
      }
      &.default {
        color: #333;
        background-color: #fff;
        border: 1rpx solid #fff;
      }
      .van-button__text {
        line-height: 50rpx;
        font-size: 24rpx;
      }
    }
  }
  // .search-btn.inner {
  //   margin: 0 -16rpx 0 10rpx;
  //   ::v-deep  .btn {
  //     height: 62rpx;
  //   }
  // }
}
.search-bar.dark .input-box {
  background: #f5f5f5;
}
</style>